<template>
   <el-card v-if="post">
    <template #header>
      <div class="header-content">
        <el-button 
          @click="goBack" 
          class="back-button"
          icon="el-icon-arrow-left"
        >
          返回
        </el-button>
        <h1>{{ post.title }}</h1>
        <div class="meta">
          <el-tag type="info">{{ post.username }}</el-tag>
          <el-tag>{{ formatDate(post.created_at) }}</el-tag>
        </div>
      </div>
    </template>

    <ContentRenderer :blocks="post.content.blocks" />
  </el-card>

  <el-skeleton v-else-if="isLoading" :rows="5" animated />

  <el-alert v-else-if="error" type="error" :title="error" show-icon closable />

  <!-- 评论区模块 -->
<div class="comment-section">
  <div class="section-header">
    <el-icon class="comment-icon"><ChatLineSquare /></el-icon>
    <h2 class="section-title">用户评论区</h2>
  </div>
  
  <div class="section-decorator">
    <div class="decorator-line"></div>
    <el-tag type="info" effect="dark" size="small">畅所欲言</el-tag>
    <div class="decorator-line"></div>
  </div>
  <CommentList
    :postId="postId"
  />
</div>
  
</template>

<script setup>
import { computed, onMounted, defineProps, ref } from 'vue'
import { usePostsStore } from '@/stores/postsStore'
import { useRouter } from 'vue-router' // 新增引入
import ContentRenderer from '@/components/ContentRenderer/ContentRenderer.vue'
import CommentList from '@/components/commentList/index.vue'
import { ChatLineSquare } from '@element-plus/icons-vue'

const props = defineProps({
  id: {
    type: [Number, String],
    required: true
  }
})

const postsStore = usePostsStore()
const router = useRouter() // 获取路由实例
const postId = ref(props.id)



// 初始化数据加载
onMounted(() => {
  postsStore.getPostById(props.id)
})

// 数据状态
const post = computed(() => postsStore.currentPost)
const isLoading = computed(() => postsStore.isLoading)
const error = computed(() => postsStore.error)

// 返回按钮处理
const goBack = () => {
  router.go(-1)
}

// 日期格式化方法
const formatDate = (isoString) => {
  if (!isoString) return '未知时间'

  const date = new Date(isoString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  })
}
</script>

<style scoped>
.header-content {
  position: relative;
  padding-left: 40px;
}

.back-button {
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0;
  font-size: 16px;
}

.back-button:hover {
  background: transparent;
}
.meta {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

.el-tag {
  padding: 0 10px;
  height: 32px;
  line-height: 32px;
}

/* 评论区容器 */
.comment-section {
  margin: 40px 0;
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 20px;
  background: #f8f9fa;
}

/* 头部样式 */
.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.comment-icon {
  font-size: 24px;
  color: var(--el-color-primary);
  margin-right: 10px;
}

.section-title {
  margin: 0;
  font-size: 20px;
  color: #303133;
}

/* 装饰分隔线 */
.section-decorator {
  display: flex;
  align-items: center;
  margin: 15px 0;
}

.decorator-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #dcdfe6, transparent);
}

.el-tag {
  margin: 0 15px;
  transform: translateY(-1px);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .comment-section {
    margin: 20px -15px;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  
  .section-title {
    font-size: 18px;
  }
}
</style>